<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;

            margin-top: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            var arr = ['red', 'green', 'blue']
            // 1.给同一类元素进行不同的操作  遍历操作 each()
            var sum = 0;
            $("div").each(function (i, domEle) {
                // 第一个参数 index 索引号（名称自取）
                // 第二个参数 domEle 返回dom对象 
                // 所以使用时，需要加上$ ,转变为js对象
                $(domEle).css("color", arr[i])
                sum += parseInt((domEle).text());
            })
            // 2.$.each() 方法遍历 主要用于遍历数据 处理数据
            $.each(("div"),function(index,ele){

            })
            // 遍历对象和数组，都比较方便
            // 例如 ：
            $.each({
                name:"andy",
                age:18
            },function(i,ele){
                console.log(i);//输出是 name age 的属性名
                console.log(ele);//输出是 andy 18 的属性值
            })
        })
    </script>
</body>

</html>